<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null: 'fold'">
          <a-row >
          <a-col :md="8" :sm="24" >
            <a-form-item
              label="订单编号"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 16, offset: 1}"
            >
              <a-input placeholder="请输入" v-model="searchParams.order_id"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24" >
            <a-form-item
              label="手机号"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 16, offset: 1}"
            >
              <a-input placeholder="请输入" v-model="searchParams.phone"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24" >
            <a-form-item
              label="日期"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 16, offset: 1}"
            >
              <a-date-picker 
                placeholder="请选择日期" 
                format="YYYY-MM-DD"
                v-model="searchParams.date" @change="onChangeDate" />
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24" >
            <a-form-item
              label="充值金额"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 16, offset: 1}"
            >
              <a-input placeholder="请输入" v-model="searchParams.amount" suffix="元"/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24" >
            <a-form-item
              label="订单状态"
              :labelCol="{span: 5}"
              :wrapperCol="{span: 16, offset: 1}"
            >
              <a-select placeholder="请选择" v-model="searchParams.status">
                <a-select-option v-for="(key, value) in statusMap" :value="value" :key="value">
                  {{ key }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="4" :sm="24" >
            <span style="float: right; margin-top: 3px;">
              <a-button type="primary" @click="submitSearch">查询</a-button>
              <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            </span>
          </a-col>
        </a-row>
        </div>
      </a-form>
    </div>
    <div>
      <standard-table
        :rowKey="(record, index) => index"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 1550 }"
      >
        <template slot="order_amount" slot-scope="order_amount">
          <a>{{ Number(order_amount.text) / 100}}元</a>
        </template>
        <template slot="amount" slot-scope="amount">
          <a>{{ Number(amount.text) / 100}}元</a>
        </template>
        <template slot="card_type" slot-scope="card_type">
          <a-tag :color="card_type.text == '实体卡' ? 'orange' : 'purple'">
            {{ card_type.text }}
          </a-tag>
        </template>
        <template slot="realpay" slot-scope="realpay">
          <a v-if="realpay.text">{{ Number(realpay.text) / 100}}元</a>
        </template>
        <template slot="order_status" slot-scope="order_status">
          <a-tag :color="colorMap[order_status.text]" >
            {{ statusMap[order_status.text] }}
          </a-tag>
        </template>
        <template slot="action" slot-scope="item">
          <a-button type="primary" style="margin-right: 8px" @click="showModal(item)">详情</a-button>
          <a-button type="danger" @click="handleAudit(item)" v-if="item.record.order_status == 2">审核</a-button>
        </template>
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template>
      </standard-table>
    </div>

    <!-- 支付详情弹窗 -->
    <a-modal v-model="visible" title="订单信息" @ok="() => {visible = false}">
      <div>
        <p v-for="(value, key) in modalData" :key="key">
          <span>{{ modalDataKey[key] || key }}：</span>
          <span>{{ key == 'order_status' ? statusMap[value] : value }}</span>
        </p>
      </div>
    </a-modal>

    <!-- 审核弹窗 -->
    <a-modal v-model="auditModal" title="审核订单" ok-text="确认" cancel-text="取消" @ok="handleAuditModal">
      <p>订单编号：{{ audit_orderId }}</p>
      <a-radio-group v-model="audit">
        <a-radio :value="5">
          审核通过
        </a-radio>
        <a-radio :value="6">
          审核拒绝
        </a-radio>
      </a-radio-group>
      <a-form-item
        v-if="audit == 6"
        style="margin-top: 20px"
        required
        label="拒绝原因"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 16, offset: 1}"
      >
        <a-input placeholder="请输入拒绝原因" v-model="reason"/>
      </a-form-item>
    </a-modal>
  </a-card>
</template>

<script>
import { RechargeOrderStatusMap, colorMap, modalDataKey } from '@/utils/enum'
import * as Api from '@/services/index'
import StandardTable from '@/components/table/StandardTable'
const columns = [
  {
    title: '订单编号',
    dataIndex: 'order_id',
    fixed: 'left',
  },
  {
    title: '充值金额',
    dataIndex: 'order_amount',
    scopedSlots: { customRender: 'order_amount' },
    fixed: 'left',
  },
  {
    title: '实际付款',
    dataIndex: 'realpay',
    width: 100,
    scopedSlots: { customRender: 'realpay' }
  },
  {
    title: '油卡类型',
    dataIndex: 'card_type',
    width: 100,
    scopedSlots: { customRender: 'card_type' }
  },
  {
    title: '油卡卡号',
    dataIndex: 'card_num',
    width: 220,
    scopedSlots: { customRender: 'card_num' }
  },
  {
    title: '订单状态',
    dataIndex: 'order_status',
    width: 100,
    scopedSlots: { customRender: 'order_status' }
  },
  // {
  //   title: '订单类型',
  //   dataIndex: 'order_type',
  //   width: 100,
  // },
  {
    title: '用户ID',
    dataIndex: 'user_id',
    width: 80
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    width: 150
  },
  // {
  //   title: '微信ID',
  //   dataIndex: 'openid'
  // },
  {
    title: '备注',
    dataIndex: 'remark',
    width: 150
  },
  {
    title: '下单时间',
    width: 200,
    dataIndex: 'created_at',
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action' },
    fixed: 'right'
  }
]

export default {
  name: 'OrderList',
  components: {StandardTable},
  data () {
    return {
      visible: false,
      modalData: '',
      audit: 5,
      auditModal: false,
      audit_orderId: '',
      reason: '',
      modalDataKey: modalDataKey,
      statusMap: RechargeOrderStatusMap,
      colorMap: colorMap,
      advanced: true,
      columns: columns,
      dataSource: [],
      selectedRows: [],
      pagination: { 
        pageSize: 10, 
        total: 1,
        current: 1,
      },
      isSearch: false,
      searchParams: {
        order_id: '',
        phone: '',
        status: '',
        date: null,
        amount: ''
      }
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    initPage() {
      this.pagination = { 
        pageSize: 10, 
        total: 1,
        current: 1,
      }
      this.isSearch = false
    },
    getOrderList() {
      let params = {
        order_type: '2',
        page: this.pagination.current
      }
      Api.OrderList(params).then(res => {
        this.pagination.total = res.data.total
        this.pagination.current = res.data.current_page
        this.dataSource = res.data.data
      })
    },
    // 分页
    handleTableChange(pagination) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.isSearch ? this.getSearchList() : this.getOrderList()
    },
    // 搜索
    submitSearch() {
      this.initPage()
      if (Object.values(this.searchParams).every(item => !item)) {
        this.getOrderList()
      } else {
        this.isSearch = true
        this.getSearchList()
      }
    },
    getSearchList() {
      let params = {
        ...this.searchParams,
        order_type: '2',
        page: this.pagination.current
      }
      if (params.amount) {
        params.amount = Number(params.amount) * 100
      }
      Api.OrderSearch(params).then(res => {
        this.pagination.total = res.data.total
        this.pagination.current = res.data.current_page
        this.dataSource = res.data.data
      })
    },
    // 重置搜索参数
    reset() {
      this.searchParams = {
        order_id: '',
        phone: '',
        date: null
      }
    },
    onChangeDate(data, dateString) {
      this.searchParams.date = dateString
    },
    remove () {
      this.dataSource = this.dataSource.filter(item => this.selectedRows.findIndex(row => row.key === item.key) === -1)
      this.selectedRows = []
    },
    showModal(item) {
      this.visible = true
      this.modalData = item.record
    },
    handleAudit(item) {
      this.auditModal = true
      this.audit_orderId = item.record.order_id
    },
    // 审核 5 通过，6 拒绝
    handleAuditModal() {
      if (this.audit == 6 && !this.reason) {
        this.$message.error('拒绝原因不能为空！');
        return
      }
      let params = {
        order_id: this.audit_orderId,
        status: this.audit,
        reason: this.reason
      }
      Api.AuditOrder(params).then(() => {
        this.auditModal = false
        this.$message.success(this.audit == 5 ? '订单审核通过！' : '订单已经拒绝！');
        this.getOrderList()
      })
    },
    // 失效订单
    failOrder(item) {
      console.log(item.record);
      let order_id = item.record.order_id
      this.$confirm({
        title: `确定作废 ${order_id} 订单？作废后将不可使用！`,
        onOk: () => {
          Api.FailureOrder({order_id}).then(res => {
            this.$message.success(res.message)
            this.initPage()
            this.getOrderList()
          }).catch(() => {
          })
        },
        onCancel() {},
      });
    },
    handleMenuClick (e) {
      if (e.key === 'delete') {
        this.remove()
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .search{
    // margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
  /deep/ .ant-modal-body{
    max-height: 440px;
    overflow: auto;
  }
</style>
